<template>
	<div class="container login-container">
		<div class="bg bg-blur"></div>
		<Card :bordered="false">
			<p slot="title" style="color:#ffffff;">基础数据平台</p>
			<Form ref="formInfo" :model="info" :rules="infoRules">
				<FormItem prop="username"><Input type="text" v-model="info.username" icon="md-person" placeholder="用户名" @on-keyup.enter="handleSubmit" /></FormItem>
				<FormItem prop="password"><Input type="password" v-model="info.password" password placeholder="密码" @on-keyup.enter="handleSubmit" /></FormItem>
				<div>
					<Button type="primary" @click="handleSubmit">登录</Button>
					<Button v-if="canRegister" style="margin-left:10px;" type="default" @click="navToPage('register')">注册</Button>
				</div>
			</Form>
		</Card>
	</div>
</template>

<script>
import qs from 'qs';
export default {
	components: {},
	data() {
		return {
			canRegister: true,
			info: {
				username: '',
				password: '',
				grant_type: 'password',
				scope: 'request',
				loginType: 'web'
			},
			infoRules: {
				username: [{ required: true, message: '请输入用户名' }],
				password: [{ required: true, message: '请输入密码' }]
			}
		};
	},
	computed: {},
	watch: {},
	created() {},
	mounted() {
		// 判断是否需要提示用户无权限登录，还是登录过期
		// 删除内存中的token
		localStorage.removeItem(this.$config.tokenName);
		// 删除内存中的登录用户信息
		localStorage.removeItem(this.$config.userInfoName);
	},
	methods: {
		// 登录处理
		handleSubmit() {
			this.$refs['formInfo'].validate(valid => {
				if (valid) {
					this.$Spin.show();
					this.$http
						.post(this.$config.loginUrl + '/oauth/token', qs.stringify(this.info))
						.then(res => {
							let resData = res.data || {};
							if (resData.access_token) {
								localStorage.setItem(this.$config.tokenName, resData.access_token);
								this.$request.get(
									this.$config.loginUrl + '/admin/sys/user_info',
									{},
									res => {
										let userInfo = res.data || {};
										if (userInfo.user && userInfo.user.isTenant != 'Y') {
											this.$Message.warning('您无权限使用本系统');
											return;
										}
										this.$Message.success('登录成功');
										localStorage.setItem(this.$config.userInfoName, JSON.stringify(userInfo));
										this.$router.replace({ name: 'org' });
									},
									false,
									true,
									true
								);
							}
						})
						.catch(err => {
							this.$Spin.hide();
							this.$Message.error('用户名或密码不正确');
						});
				}
			});
		},
		// 导航
		navToPage: function(name) {
			this.$router.push({ name: name });
		}
	}
};
</script>

<style lang="scss">
.container {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	// background: url(../../assets/bg_login.jpg);
	background-size: 100% 100%;
	.ivu-card {
		width: 300px;
		height: auto;
		background: rgba(50, 50, 50, 0.3);

		input {
			background: transparent;
			color: white;
		}
		.ivu-input-icon,
		.ivu-input-prefix i,
		.ivu-input-suffix i {
			color: white;
		}
	}

	.bg {
		background: url(../../assets/bg_login.jpg) no-repeat;
		background-size: 100% 100%;
		height: 100%;
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
	}

	.bg-blur {
		-webkit-filter: blur(10px);
		-moz-filter: blur(10px);
		-o-filter: blur(10px);
		-ms-filter: blur(10px);
		filter: blur(10px);
	}
}
.ivu-card-head {
	border-bottom: 1px solid #7e7d7c !important;
}
</style>
